<include file="Common/header" />
{$bread_crumb}
<div class="page-container">
    <form class="form form-horizontal" id="form-article-add" action="{:U('setting/city')}" method="post">
        <div id="tab-system" class="HuiTab">
            <div class="tabBar cl">
                <span>开通城市</span>
                <!-- <span>安全设置</span>
                <span>邮件设置</span>
                <span>其他设置</span> -->
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        开通城市：
                    </label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <div style="display:inline-block;height:30px;line-height:30px;">
                            <select id="province" data-default="江苏" style="height:30px;"></select>
                        </div>
                        <div style="display:inline-block;height:30px;line-height:30px;">
                            <select id="city" data-default="淮安" style="height:30px;"></select>
                        </div>
                        <div style="display:inline-block;height:30px;line-height:30px;">
                            <select id="district" data-default="涟水县" style="height:30px;"></select>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <!-- <span class="c-red"></span> -->
                    </label>
                    <div class="formControls col-xs-4 col-sm-2">
                        <input type="text" name="content" value="" id="kevin" class="input-text" readonly>
                    </div>
                    <div class="formControls col-xs-4 col-sm-2">
                        <input class="btn btn-secondary radius" type="button" onclick="ke()" value="填入">
                    </div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button onClick="article_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
                <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
<include file="Common/footer" />
<!-- tab 切换 -->
<script type="text/javascript">
$(function(){
    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });
    $("#tab-system").Huitab({
        index:0
    });
});

// select 元素
var $selectorProvince = $("#province");
var $selectorCity = $("#city");
var $selectorDistrict = $("#district");

// 地区的默认值，通过select的default-data获取
var defaultProvince = $selectorProvince.attr('data-default');
var defaultCity = $selectorCity.attr('data-default');
var defaultDistrict= $selectorDistrict.attr('data-default');

if(!defaultProvince) defaultProvince = currentProvince;
if(!defaultCity) defaultCity = currentCity;

// 初始化
initSelector($selectorProvince,provinces);
initSelector($selectorCity,getCities(defaultProvince));
initSelector($selectorDistrict,getDistricts(defaultProvince,defaultCity));

// 选择省份
$selectorProvince.change(function(){
    currentProvince = $(this).val();
    initSelector($selectorCity,getCities(currentProvince));
    $selectorCity.trigger('change');
})

// 选择城市
$selectorCity.change(function(){
    currentCity = $(this).val();
    initSelector($selectorDistrict,getDistricts(currentProvince,currentCity));
})

// 初始化选择框 其中 data 表示包含所有选择项的数组
function initSelector(selectObj,data){
    // 空的数据直接隐藏select元素
    if(data == ""){
        selectObj.hide();
        selectObj.html("");
    }else{
        selectObj.show();
    }

    var str = "";
    var selected = selectObj.attr('data-default');
    for (var i = 0; i < data.length; i++) {
        var _data = data[i];
        if(_data === selected){
            str += '<option selected="selected" value="'+_data+'">'+_data+'</option>';
        }else{
            str += '<option value="'+_data+'">'+_data+'</option>';
        }
    }
    selectObj.html(str);
}
function ke() {

    var province = $("#province").find("option:selected").text();
    var city = $("#city").find("option:selected").text();
    var district = $("#district").find("option:selected").text();
    console.log(province,city,district)
    $('#kevin').val(province+city+district);

}
</script>